import { loginAPI } from '@/api/user'
import { Message } from 'element-ui'
import { setToken, getToken, getPassword, getUsername, removeToken, setPassword, setUsername } from '@/utils/auth'
export default {
  // 命名空间
  namespaced: true,
  // 1.存放数据,推荐是一个函数写法，但是写对象也可以
  state: {
    token: getToken() || '',
    userInfo: {
      password: getPassword() || '',
      username: getUsername() || ''
    }
  },
  // 2.修改state的数据(唯一入口)
  mutations: {
    setToken(state, newToken) {
      state.token = newToken
    },
    removeToken(state) {
      removeToken()
      state.token = ''
    },
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    },
    removeUserInfo(state) {
      state.userInfo = {
        password: '',
        username: ''
      }
    }
  },
  // 3.调用异步方法，异步接口
  actions: {
    loginAction(store, { data, router, route, remberMe }) {
      loginAPI(data).then((res) => {
        store.commit('setToken', res.data.token)
        setToken(res.data.token)
        Message.success('登录成功')
        // 跳转到首页
        if (remberMe) {
          setUsername(data.username)
          setPassword(data.password)
          store.commit('setUserInfo', data)
        } else {
          setUsername('')
          setPassword('')
          store.commit('removeUserInfo')
        }
        if (route.query.redirect) {
          router.push(route.query.redirect)
        } else {
          router.push('/')
        }
      })
    }
  },
  // getters 类似于计算属性
  getters: {}
}
// 使用语法：如何在组件中使用子模块的各个数据和方法
// 1.在组件中使用state数据
// this.$store.state.user.xxx
// 2.在组件中使用map方法
// 如果组件中需要使用多个数据，可以使用mapState方法
/**
 * import { mapState } from 'vuex'
 * computed:{
 *   ...mapState('模块名','属性名1','属性名2')
 * }
 */
// 2.在组件中使用getters中的数据
// this.$store.getters['user/xxx']
/**
 * import { mapGetters } from 'vuex'
 * computed:{
 *  ...mapGetters('模块名','属性名1','属性名2')
 * }
 */
// 3.使用mutations中的方法
// this.$store.commit('模块名/方法名',参数) 参数只能传递一个
/**
 * import { mapMutations } from 'vuex'
 */
// 4.使用actions中的方法
// this.$store.dispatch('模块名/方法名',参数) 参数只能传递一个
/**
 * import { mapActions } from 'vuex'
 * methods:{
 * ...mapActions('模块名',['方法名1','方法名2'])}
 */
